<template>
	<u-popup :show="deliveryShow" :round="17" @close="close" closeable closeOnClickOverlay safeAreaInsetTop
		activeColor="#333333" class="delivery-steps">
		<view class="company">
			{{company + '：' +trackingNumber}}
		</view>
		<scroll-view class="delivery" scroll-y :scroll-top="scrollTop">
			<u-steps :current="list.length-1" direction="column" dot>
				<u-steps-item :title="dekiveryStatus[item.status]" :desc="logisticsTime" v-for="item of list"
					:key="item.id" class="step-item">
					<view class="slot-desc" slot="desc">
						<view class="time" style="color: #9d9d9d;">{{item.logisticsTime}}</view>
						<view class="desc">{{item.context}}</view>
					</view>

				</u-steps-item>
			</u-steps>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default {
		name: "delivery-step",
		props: {
			list: {
				type: Array,
				default: () => {
					[]
				}
			},
			company: {
				type: String,
				default: ''
			},
			trackingNumber: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				scrollTop:0,
				deliveryShow: false,
				dekiveryStatus: {
					0: '运送中',
					1: '已揽收',
					2: '疑难件',
					3: '已签收',
					4: '已退回',
					5: '派件中',
					8: '清关中',
					14: '已拒收',
				}
			};
		},
		methods: {

			// 展开\关闭物流信息
			open(data) {
				this.deliveryShow = true
				this.scrollTop = 1000
			},
			close() {
				this.deliveryShow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.company {
		margin: 10rpx 50rpx 20rpx;
		font-size: 28rpx;
		color: #606266;
		font-weight: bold;
	}

	.delivery {
		padding: 0 50rpx;
		max-height: 50vh;
		box-sizing: border-box;

		.slot-desc {
			margin-bottom: 15rpx;
		}

		::v-deep .u-text__value {
			font-size: 30rpx !important;
			font-weight: bold !important;
		}
	}
</style>